<template>
  基本用法：
  <div class="demo">
    <wanglei-button plain>默认按钮</wanglei-button>
    <wanglei-button type="primary">主要按钮</wanglei-button>
    <wanglei-button type="success">成功按钮</wanglei-button>
    <wanglei-button type="info">信息按钮</wanglei-button>
    <wanglei-button type="warning">警告按钮</wanglei-button>
    <wanglei-button type="danger">危险按钮</wanglei-button>
  </div>

  <div class="demo">
    <wanglei-button plain>朴素按钮</wanglei-button>
    <wanglei-button type="primary" plain>主要朴素按钮</wanglei-button>
    <wanglei-button type="success" plain>成功朴素按钮</wanglei-button>
    <wanglei-button type="info" plain>信息朴素按钮</wanglei-button>
    <wanglei-button type="warning" plain>警告朴素按钮</wanglei-button>
    <wanglei-button type="danger" plain>危险朴素按钮</wanglei-button>
  </div>

  <div class="demo">
    <wanglei-button round>圆角按钮</wanglei-button>
    <wanglei-button type="primary" round>主要按钮</wanglei-button>
    <wanglei-button type="success" round>成功按钮</wanglei-button>
    <wanglei-button type="info" round>信息按钮</wanglei-button>
    <wanglei-button type="warning" round>警告按钮</wanglei-button>
    <wanglei-button type="danger" round>危险按钮</wanglei-button>
  </div>
    <wanglei-button disabled>默认按钮</wanglei-button>
    <wanglei-button type="primary" disabled>主要按钮</wanglei-button>
  <div class="demo">
    <wanglei-button circle icon="clear"></wanglei-button>
    <wanglei-button circle icon="edit"></wanglei-button>
  </div>

  按钮组：
  <div>
    <wanglei-button-group>
      <wanglei-button type="primary">1</wanglei-button>
      <wanglei-button type="primary">2</wanglei-button>
      <wanglei-button type="primary">3</wanglei-button>
    </wanglei-button-group>
  </div>
  <div class="demo">
    <wanglei-button type="primary" loading>加载中</wanglei-button>
  </div>
</template>

<script>
import { defineComponent } from 'vue'
export default defineComponent({
  setup() {

    return {

    }
  }
})
</script>

<style scoped lang="scss">
  div.demo {
    margin-top: 10px;
    & > button {
      margin-right: 10px;
    }
  }
</style>
